<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="never">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML引用VUE3 + ant-design-vue 4.x</title>
    <script src="https://gitee.com/liukaigt/padavandata/raw/master/padavanonline/allhost.js"></script>
    <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
    <link  type="text/css" href="https://unpkg.com/ant-design-vue@4.2.3/dist/reset.css" media="screen" rel="stylesheet" >
    <script src="https://unpkg.com/ant-design-vue@4.2.3/dist/antd.min.js"></script>
</head>
 
<body>
    <div id="app" style="">
        <a-style-provider hash-priority="high">
            <a-table :columns="columns" :data-source="data" :pagination="pagination" :scroll="{ x: 500, y:500 }">
                <template #operation="{ text, record, index, column }">
                  <template v-if="column.key === 'operation'">
                    <a-popconfirm
                      title="确定要删除这行吗?"
                      ok-text="是"
                      cancel-text="否"
                      @confirm="deleteRow(record.key)"
                    >
                      <a href="#">删除</a>
                    </a-popconfirm>
                    <a :href="record.url">查看</a>
                  </template>
                  <template v-else>
                    {{ text }}
                  </template>
                            </template>
            </a-table>
        </a-style-provider>
    </div>
 
<script setup>

            const columns = [
              {
                title: '设备名称',
                width: 50,
                dataIndex: 'devicename',
                key: 'devicename',
                // fixed: 'left',
                sortable: true,
                
              },
              {
                title: 'mac地址',
                width: 50,
                dataIndex: 'mac',
                key: 'mac',
                // fixed: 'left',
                sortable: true,
              },
              {
                title: 'ipv4',
                dataIndex: 'ipv4',
                key: 'ipv4',
                width: 40,
                sortable: true,
              },
              {
                title: '在线状态',
                dataIndex: 'status',
                key: 'status',
                width: 40,
                sortable: true,
              },
              {
                title: '最后上线时间',
                dataIndex: 'lastonline',
                key: 'lastonline',
                width: 50,
                sortable: true,
              },
              {
                title: '最后下线时间',
                dataIndex: 'lastoffline',
                key: 'lastoffline',
                width: 50,
                sortable: true,
              },
              {
                title: '操作',
                key: 'operation',
                fixed: 'right',
                width: 50,
                slots: { customRender: 'operation' }, // 注意此处代码和前面的<template #operation="{ column }">  #号后面的一致
              },
            ];
            
            // const data = [];
            // for (let i = 0; i < 100; i++) {
            //   data.push({
            //     key: i,
            //     devicename: `设备名称 ${i}`,
            //     mac: `设备名称 ${i}`,
            //     ipv4: `ipv4 ${i}`,
            //     status: `在线状态 ${i}`,
            //     statushis: `在线历史 ${i}`,
            //     operation: `operation ${i}`,
            //     url: `common-largebar-show.html?js=onlinedata-${i}.js`,
            //   });
            // }
            
            const sortState =  {
              field: 'name',
              order: 'ascend'
            }

            const pagination= {
              pageSizeOptions: ['10', '20', '50', '100'], // 指定每页可以显示的条数
        defaultPageSize: 100,
        showSizeChanger: true,
        showQuickJumper: true,
      };
    
   



            const { createApp } = Vue;
    const app = createApp({
    data() {
      return {
        data,
        columns,
        sortState,
        pagination,
      };
    },
    methods: {
      // onChange,
      deleteRow,
    },
  });

  app.use(antd); // 使用Ant Design Vue
    vm = app.mount('#app');


function deleteRow (key) {
    console.log("删除key="+key);
    console.log("删除数据内容为="+JSON.stringify(vm.data[key]));
  // const filteredData = data.value.filter((item) => item.key !== key);
  // data.value = filteredData;
  // selectedRowKeys.value = selectedRowKeys.value.filter((itemKey) => itemKey !== key);
};


function handleSortChange({ field, order }) {
      this.sortState = { field, order };
      this.data = this.data.sort((a, b) => {
        if (order === 'ascend') {
          return a[field] > b[field] ? 1 : -1;
        } else {
          return a[field] < b[field] ? 1 : -1;
        }
      });
    }

</script>
</body>
</html>

